<template>
  <div class="container">
    <!--顶部盒子-->
    <div class="top">
      <ul class="tab_box">
        <li :class="tab1Class" @click="handleTabClick(1)">工程计量</li>
        <li :class="tab2Class" @click="handleTabClick(2)">现场管理</li>
      </ul>
      <div class="top_center">{{this.title}}</div>
      <ul class="weather">
        <li>{{this.dateYear}} <span>{{this.dateDay}}  </span><span>{{this.dateWeek}}</span></li>
      </ul>
    </div>
    <!--第一页中间部分的盒子-->
    <div class="main_box" v-show="this.index">
      <div class="main_left">
        <div class="left_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon5.png"/>完成情况</div>
          <div class="data_num_box">
            <div class="data_box1">
              <div class="data_title">合同金额</div>
              <font class="font qianlan" face="font01">{{projectData.data1.contractTotal}}</font>
              <span>万元</span>
              <div class="j1_box1" style="display: none">
                <span class="j1_1"></span>
                <span class="j1_2"></span>
                <span class="j1_3"></span>
                <span class="j1_4"></span>
              </div>
            </div>
            <div class="data_box2">
              <div class="data_title">累计完成金额</div>
              <font class="font shenlan" face="font01">{{projectData.data1.currentEndTotal}}</font>
              <span>万元</span>
              <div class="j1_box2">
                <span class="j1_1"></span>
                <span class="j1_2"></span>
                <span class="j1_3"></span>
                <span class="j1_4"></span>
              </div>
            </div>
          </div>
          <div id="data2">

          </div>
        </div>
        <div class="left_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon6.png"/>完成进度</div>
          <div id="data3"></div>
        </div>
      </div>

      <div class="main_center">
        <div class="center_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon3.png"/>电子地图</div>
          <div id="center_map">
          </div>
        </div>
        <div class="center_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon2.png"/>完成统计</div>
          <div class="sq_data">
            <div class="sq_left">
              <div class="sq_left_t">
                <div class="data_box" style="text-align: center;">
                  <font class="font3 qianlan" face="font01">{{this.projectData.data1.currentTotal}}</font><span>万元</span>
                  <div class="data_title2">本月完成金额</div>
                </div>
              </div>
              <span class="line"></span>
              <div class="sq_left_b">
                <div class="data_box" style="text-align: center;">
                  <font class="font3 huangse" face="font01">{{this.projectData.data1.currentEndTotal}}</font><span>万元</span>
                  <div class="data_title2">累计完成金额</div>
                </div>
              </div>
            </div>
            <div id="data4">
            </div>
          </div>
        </div>
      </div>

      <div class="main_right">
        <div class="right_top">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon4.png"/>机构单位</div>
          <div class="data_sjjm">
            <div class="data_box2">
              <div class="data_title">施工单位</div>
              <font class="font qianlan" face="font01">4</font>
              <span>个</span>
            </div>
            <div class="data_box2">
              <div class="data_title">监理单位</div>
              <font class="font shenlan" face="font01">4</font>
              <span>个</span>
            </div>
            <div class="data_box2">
              <div class="data_title">业主单位</div>
              <font class="font zise" face="font01">1</font>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="right_center">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page1/icon1.png"/>数据统计</div>
          <div class="data5" id="data5">

          </div>

        </div>
        <div class="right_bottom">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title1">标段计量数据</div>
          <div class="wrap">
            <ul>
              <li>
                <p>第8期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第7期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第6期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第5期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第4期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第3期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第2期：工程计量费用共计 - 120万元</p>
              </li>
              <li>
                <p>第1期：工程计量费用共计 - 120万元</p>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>
    <!--第二页中间部分的盒子-->
    <div class="main_box2" v-show="!index">
      <div class="top_box">
        <div class="top_box_left">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon2.png"/>视频监控</div>
          <div class="community">
            <div class="box" id="video1">
            </div>
            <div class="box" id="video2">
            </div>
            <div class="box" id="video3">
            </div>
            <div class="box" id="video4">
            </div>
          </div>
        </div>

        <div class="top_box_center">
          <div class="p2_cT">
            <span class="j_1"></span>
            <span class="j_2"></span>
            <span class="j_3"></span>
            <span class="j_4"></span>
            <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon6.png"/>劳务工数据</div>
            <ul class="p2_cT_box">
              <li>
                <div class="p2_cT_title">在场人数</div>
                <span class="block block1">
										<font class="font2 huise" face="font01">{{this.projectData.staff.count[0]}}</font>
									</span>
                <span class="block">
										<font class="font2 huise" face="font01">{{this.projectData.staff.count[1]}}</font>
									</span>
                <span class="block">
										<font class="font2 huise" face="font01">{{this.projectData.staff.count[2]}}</font>
									</span>
                <span class="block">
										<font class="font2 huise" face="font01">{{this.projectData.staff.count[3]}}</font>
									</span>
                <span class="block">
										<font class="font2 huise" face="font01">{{this.projectData.staff.count[4]}}</font>
									</span>
                <span class="ren">人</span>
              </li>
              <li>
                <div class="p2_cT_title">本月进场</div>
                <span class="block block1">
										<font class="font2 zise" face="font01">{{this.projectData.staff.enterCount[0]}}</font>
									</span>
                <span class="block">
										<font class="font2 zise" face="font01">{{this.projectData.staff.enterCount[1]}}</font>
									</span>
                <span class="block">
										<font class="font2 zise" face="font01">{{this.projectData.staff.enterCount[2]}}</font>
									</span>
                <span class="block">
										<font class="font2 zise" face="font01">{{this.projectData.staff.enterCount[3]}}</font>
									</span>
                <span class="block">
										<font class="font2 zise" face="font01">{{this.projectData.staff.enterCount[4]}}</font>
									</span>
                <span class="ren">人</span>
              </li>
              <li>
                <div class="p2_cT_title">本月离场</div>
                <span class="block block1 block_o">
										<font class="font2 huangse" face="font01">{{this.projectData.staff.exitCount[0]}}</font>
									</span>
                <span class="block block_o">
										<font class="font2 huangse" face="font01">{{this.projectData.staff.exitCount[1]}}</font>
									</span>
                <span class="block block_o">
										<font class="font2 huangse" face="font01">{{this.projectData.staff.exitCount[2]}}</font>
									</span>
                <span class="block block_o">
										<font class="font2 huangse" face="font01">{{this.projectData.staff.exitCount[3]}}</font>
									</span>
                <span class="block block_o">
										<font class="font2 huangse" face="font01">{{this.projectData.staff.enterCount[4]}}</font>
									</span>
                <span class="ren">人</span>
              </li>
            </ul>
          </div>
          <div class="p2_cB">
            <span class="j_1"></span>
            <span class="j_2"></span>
            <span class="j_3"></span>
            <span class="j_4"></span>
            <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon4.png"/>工种统计</div>

            <div id="labourStaff"></div>
            <ul class="home_data" v-if="this.projectData.staff.postGroup.length > 0">
              <li class="home_data_one">
                <div class="home_data_num">
                  <font class="font1 shenlan" face="font01">{{this.projectData.staff.postGroup[0].value}}</font>
                  <span>人</span>
                </div>
                <div class="home_data_name">{{this.projectData.staff.postGroup[0].name}}</div>
              </li>
                <li class="home_data_two" v-if="this.projectData.staff.postGroup.length > 1">
                  <div class="home_data_num">
                    <font class="font1 qianlan" face="font01">{{this.projectData.staff.postGroup[1].value}}</font>
                    <span>人</span>
                  </div>
                  <div class="home_data_name">{{this.projectData.staff.postGroup[1].name}}</div>
                </li>
                <li class="home_data_three" v-if="this.projectData.staff.postGroup.length > 2">
                  <div class="home_data_num">
                    <font class="font1 zise" face="font01">{{this.projectData.staff.postGroup[2].value}}</font>
                    <span>人</span>
                  </div>
                  <div class="home_data_name">{{this.projectData.staff.postGroup[2].name}}</div>
                </li>
            </ul>

          </div>
        </div>
        <div class="top_box_right">
          <div class="p2_rT">
            <span class="j_1"></span>
            <span class="j_2"></span>
            <span class="j_3"></span>
            <span class="j_4"></span>
            <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon3.png"/>劳务工工资</div>
            <div class="data6" id="data6"></div>
            <div class="data7" id="data7"></div>
<!--            <div class="data_sqgl">-->
<!--              <div class="data_box">-->
<!--                <font class="font shenlan" face="font01">10025</font><span>人</span>-->
<!--                <div class="data_title2">社区实有人口</div>-->
<!--              </div>-->
<!--              <div class="data_box">-->
<!--                <font class="font zise" face="font01">8962</font><span>个</span>-->
<!--                <div class="data_title2">户籍人口总数</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <span class="line"></span>-->
<!--            <div class="data_sqgl">-->
<!--              <div class="data_box">-->
<!--                <font class="font qianlan" face="font01">10025</font><span>人</span>-->
<!--                <div class="data_title2">暂住证未办理人数</div>-->
<!--              </div>-->
<!--              <div class="data_box">-->
<!--                <font class="font huangse" face="font01">8962</font><span>个</span>-->
<!--                <div class="data_title2">持有暂住证人数</div>-->
<!--              </div>-->
<!--            </div>-->

<!--            <ul class="shequ_charts">-->
<!--              <li id="chartsdiv1"></li>-->
<!--              <li id="chartsdiv2"></li>-->
<!--            </ul>-->
<!--            <ul class="home_data2">-->
<!--              <li class="home_data_one">-->
<!--                <div class="home_data_num">-->
<!--                  <font class="font1 shenlan" face="font01">456</font>-->
<!--                  <span>户</span>-->
<!--                </div>-->
<!--                <div class="home_data_name">流动人口</div>-->
<!--              </li>-->
<!--            </ul>-->
<!--            <ul class="home_data2">-->
<!--              <li class="home_data_two">-->
<!--                <div class="home_data_num">-->
<!--                  <font class="font1 qianlan" face="font01">456</font>-->
<!--                  <span>户</span>-->
<!--                </div>-->
<!--                <div class="home_data_name">特殊人群</div>-->
<!--              </li>-->
<!--            </ul>-->
          </div>
<!--          <div class="p2_rB">-->
<!--            <span class="j_1"></span>-->
<!--            <span class="j_2"></span>-->
<!--            <span class="j_3"></span>-->
<!--            <span class="j_4"></span>-->
<!--            <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon5.png"/>车辆统计</div>-->
<!--            <div class="data_cwgl">-->
<!--              <div class="data_box">-->
<!--                <font class="font zise" face="font01">3</font><span>个</span>-->
<!--                <div class="data_title2">特殊车辆</div>-->
<!--              </div>-->
<!--              <div class="data_box">-->
<!--                <font class="font qianlan" face="font01">15</font><span>个</span>-->
<!--                <div class="data_title2">在场车辆数</div>-->
<!--              </div>-->
<!--              <div class="data_box">-->
<!--                <font class="font shenlan" face="font01">18</font><span>个</span>-->
<!--                <div class="data_title2">总车辆数</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>


      </div>
      <div class="bottom_box">
        <div class="bottom_left">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon7.png"/>试验检测报告</div>
          <ul class="list">
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
          </ul>
        </div>
        <div class="bottom_center">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon7.png"/>试验检测报告</div>
          <ul class="list">
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
          </ul>
        </div>
        <div class="bottom_right">
          <span class="j_1"></span>
          <span class="j_2"></span>
          <span class="j_3"></span>
          <span class="j_4"></span>
          <div class="title"><img src="~@/assets/screen/screen4/images/page2/icon7.png"/>试验检测报告</div>
          <ul class="list">
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-21〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
            <li>
              <span class="circular2"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle huangse">【未通过】</span>
            </li>
            <li>
              <span class="circular3"></span>
              <span class="time">
									〔2024-09-22〕
								</span>
              <span>水泥混凝土抗压强度试验(立方体抗压)</span>
              <span class="handle qianlan">【已通过】</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  import { formatTime1 } from "@/utils";
  import mapData from '@/data/map.json';
  import { loadProjectTotalData } from "@/api";
  import echarts from 'echarts';
  import EZUIKit from "@/plugins/ezuikit";
  import {getEzAccessToken, getVideo, listSceneVideo} from "@/api/site/video/video";
  import { getData2, getData3, getData5, getLabourStaff } from "@/api/screen/screen4/data";
  import * as math from 'mathjs';

  export default {
    name: "screen1",
    data() {
      return {
        index: true,
        title: "国道110公路工程计量",
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        projectId: null,
        tab1Class: "tab1 active",
        tab2Class: "tab2",
        mapData: mapData,
        // 地图
        map: null,
        projectData: {
          data1: {
            contractTotal: null,
            currentTotal: null,
            currentEndTotal: null,
          },
          data2: {
            xAxis: [],
            series: [],
          },
          data3: {
            percentage: [],
            grayBar: [1, 1, 1, 1, 1, 1, 1, 1],
            name: []
          },
          data4: {
            xAxis: [],
            series: []
          },
          data5: [],
          staff: {
            count: [],
            enterCount: [],
            exitCount: [],
            postGroup: [],
            salaryDate: [],
            totalList: [],
            accumulateTotalList: []
          },
          data6: {
            xAxis: [],
            series: [],
          },
          data7: {
            xAxis: [],
            series: []
          },
        },
        video: {
          token: null,
          ezvizPlay1: null,
          ezvizPlay2: null,
          ezvizPlay3: null,
          ezvizPlay4: null,
        }
      }
    },

    created() {
      this.projectId = this.$route.query.projectId;
      document.title = this.$route.query.name;
      console.log("可视化大屏一页面执行created方法");
    },
    mounted() {
      // this.cancelLoading();
      this.timeFn();
      this.loadData(false);
      console.log("可视化大屏一页面执行mounted方法");

    },
    beforeDestroy() {
      debugger
      console.log("页面销毁------------------------------");
    },
    methods: {
      timeFn() {
        this.timing = setInterval(() => {
          this.dateDay = formatTime1(new Date(), 'HH: mm: ss')
          this.dateYear = formatTime1(new Date(), 'yyyy-MM-dd')
          this.dateWeek = this.weekday[new Date().getDay()]
        }, 1000)
      },
      handleTabClick(index) {
        if (index == 1) {
          this.index = true;
          this.title = "国道110公路工程计量";
          this.tab1Class = "tab1 active";
          this.tab2Class = "tab2";
        } else {
          this.index = false;
          this.title = "国道110公路现场管理";
          this.tab1Class = "tab1";
          this.tab2Class = "tab2 active";
        }
        this.loadData(true);
      },
      loadData(flag) {
        if (this.index) {
          this.loadMap();
          this.getData1();
          this.getData2();
          this.getData3();
          this.getData4();
          this.getData5();
          if (flag) {
            this.destroyVideo();
          }
        } else {
          this.reloadMap();
          this.getVideo();
          this.getLabourStaff();
        }
      },
      loadMap() {
        if (this.mapData) {
          this.mapData.project.forEach(project => {
            if (project.projectId == this.projectId) {
              this.data = project.data;
              this.initMap(this);
            }
          });
        }
      },
      initMap(_this) {
        _this.map = new AMap.Map('center_map', {
          center: _this.data.center,
          zoom: _this.data.zoom,
          // viewMode: '3D',
        });
        _this.map.setMapStyle("amap://styles/darkblue");

        // 线路图
        _this.data.lines.forEach(line => {
          let lines = new AMap.Polyline({
            path: line.data,
            strokeColor: '#2f83de',
            // strokeColor: line.color,
            strokeOpacity: 1,
            strokeWeight: 8,
            strokeStyle: "solid",
            lineJoin: "round",
            showDir: true,
            lineCap: "round",
            geodesic: true // 设置为true表示绘制大地线（弧线）
          });
          _this.map.add(lines);
        });
      },
      reloadMap() {
        if (this.map) {
          this.map.destroy();
        }
      },
      getData1() {
        loadProjectTotalData(this.projectId).then(response => {
          let contractTotal = math.round(response.contractTotal/10000, 0);
          this.projectData.data1.contractTotal = contractTotal;
          let currentTotal = math.round(response.currentTotal/10000, 0);
          this.projectData.data1.currentTotal = currentTotal;
          let currentEndTotal = math.round(response.currentEndTotal/10000, 0);
          this.projectData.data1.currentEndTotal = currentEndTotal;
        });
      },
      getData2() {
        getData2(this.projectId).then(response => {
          this.projectData.data2.xAxis = response.periods;
          this.projectData.data2.series = response.currentEndTotalList;
          this.projectData.data4.xAxis = response.periods;
          this.projectData.data4.series = response.currentTotalList;
          //页面交互、数据
          let myChart = echarts.init(document.getElementById('data2'));
          let option = {
            color: ['#0345A2'],
            title: {
              default: false
            },
            //整个图表位置
            grid: {
              left: '1%',
              right: '4%',
              bottom: '10%',
              top: '15%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis'
            },
            toolbox: {
              show: false
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.projectData.data2.xAxis,
              axisLabel: {
                interval: 1
              },
              axisLine: {
                lineStyle: {
                  color: '#0345A2', // 颜色
                  width: 1, // 粗细
                  type: 'solid'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#86BED3'
                }
              },
              //辅助线
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: '#143260',
                  type: 'dashed'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#0345A2', // 颜色
                  width: 1, // 粗细
                  type: 'solid'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#86BED3'
                }
              },
              //辅助线
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: '#143260',
                  type: 'dashed'
                }
              }
            },
            series: [{
              name: '累计完成',
              type: 'line',
              smooth: true,
              data: this.projectData.data2.series,
              symbol: 'none',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#023D7D' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0B1842' // 100% 处的颜色
                }])
              },
              markLine: {
                show: false
              }
            }]
          };
          myChart.setOption(option);
          let myChart1 = echarts.init(document.getElementById('data4'));
          let option1 = {
            tooltip: {},
            grid: {
              top: '14%',
              left: '1%',
              right: '1%',
              bottom: '2%',
              containLabel: true,
            },
            legend: {
              top: '-1%',
              itemGap: 50,
              data: ['每月完成金额'],
              textStyle: {
                color: '#1E94FE',
                borderColor: '#fff',
                fontSize: 14,
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: '#f9f9f9'
                },
              },
              axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15,
                },
                rotate: 60,
              },
              axisTick: {
                show: false,
              },
              data: this.projectData.data4.xAxis,
              axisLabel: {
                interval: 1
              },
            }],
            yAxis: [{
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 7,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#0a3256'
                }
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: '#d1e6eb',

                },
              },
              axisTick: {
                show: false,
              },
            }],
            series: [ {
              name: '每月完成金额',
              type: 'bar',
              barWidth: 10,
              tooltip: {
                show: false
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                      offset: 0,
                      color: '#14c8d4'
                    },
                      {
                        offset: 1,
                        color: '#43eec6'
                      }
                    ]
                  ),
                }
              },
              data: this.projectData.data4.series
            }]
          };
          myChart1.setOption(option1);
        });

      },
      getData3() {
        getData3(this.projectId).then(response => {
          this.projectData.data3.name = response.itemNames;
          this.projectData.data3.percentage = response.percentages;
          let myChart1 = echarts.init(document.getElementById('data3'));
          let _this = this;
          let option = {
            grid: {
              left: '5%', //如果离左边太远就用这个......
              right: '5%',
              bottom: '-2%',
              top: '5%',
              containLabel: true
            },
            xAxis: [{
              show: false,
            },
              {
                show: false,
              }
            ],
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true, //让Y轴数据不显示
              },

              axisTick: {
                show: false, //隐藏Y轴刻度
              },
              axisLine: {
                show: false, //隐藏Y轴线段
              },
            },
            series: [
              //背景色
              {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '15%', //统计条宽度
                itemStyle: {
                  normal: {
                    barBorderRadius: 50,
                    color: 'rgba(41, 55, 94)'
                  },
                },
                z: 1,
                data: this.projectData.data3.grayBar,
              },
              //蓝条
              {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '15%', //统计条宽度
                itemStyle: {
                  normal: {
                    barBorderRadius: 50, //统计条弧度
                    color: {
                      colorStops: [{
                        offset: 0,
                        color: '#5d29f7' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: '#5093fb' // 100% 处的颜色
                      }],
                      globalCoord: false, // 缺省为 false

                    }
                  },
                },
                max: 1,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: '#ccc', //百分比颜色
                      fontSize: 18
                    },
                    position: [0, '-20'],
                    rich: { //富文本
                      green: {
                        color: '#70DDA7',
                        fontSize: 18
                      },
                      yellow: {
                        color: '#CCB877',
                        fontSize: 18
                      },
                      red: {
                        color: '#B916DE',
                        fontSize: 18
                      }
                    },
                    formatter: function (data) {
                      return _this.projectData.data3.name[data.dataIndex]
                    },

                  }
                },
                data: this.projectData.data3.percentage,
              },
            ]
          };
          myChart1.setOption(option);
        });

      },
      getData4() {
      },
      getData5() {
        getData5(this.projectId).then(response => {
          this.projectData.data5 = response.mapList;
          let myChart = echarts.init(document.getElementById('data5'));
          let option = {
            tooltip: {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
            },
            calculable: true,
            series: [{
              name: ' ',
              color: [
                "#37a2da",
                "#32c5e9",
                "#9fe6b8",
                "#ffdb5c",
                "#ff9f7f",
                "#fb7293",
                "#e7bcf3",
                "#8378ea"
              ],
              type: 'pie',
              radius: [0, 100],
              center: ['50%', '50%'],
              // roseType: 'radius',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },

              lableLine: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: this.projectData.data5
            },]
          };
          myChart.setOption(option);
        });
      },
      getData6() {

      },
      getVideo() {
          getEzAccessToken().then(response => {
            this.video.token = response.msg;
            // this.getVideo();
            listSceneVideo(1).then(response => {
              if (response.data.length > 0) {
                let themeData = {
                  "header": {
                    "color": "#1890ff",
                    "activeColor": "#FFFFFF",
                    "backgroundColor": "#000000",
                    "btnList": [
                      {
                        "iconId": "deviceID",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "顶部设备序列号",
                        "isrender": 0
                      },
                      {
                        "iconId": "deviceName",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "顶部设备名称",
                        "isrender": 0
                      },
                      {
                        "iconId": "cloudRec",
                        "part": "right",
                        "defaultActive": 0,
                        "memo": "云存储",
                        "isrender": 0
                      },
                      {
                        "iconId": "rec",
                        "part": "right",
                        "defaultActive": 0,
                        "memo": "SD卡回放",
                        "isrender": 0
                      }
                    ]
                  },
                  "footer": {
                    "color": "#FFFFFF",
                    "activeColor": "#1890FF",
                    "backgroundColor": "#00000021",
                    "btnList": [
                      {
                        "iconId": "play",
                        "part": "left",
                        "defaultActive": 1,
                        "memo": "播放",
                        "isrender": 1
                      },
                      {
                        "iconId": "capturePicture",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "截屏按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "sound",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "声音按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "pantile",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "云台控制按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "recordvideo",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "录制按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "talk",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "对讲按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "zoom",
                        "part": "left",
                        "defaultActive": 0,
                        "memo": "电子放大",
                        "isrender": 1
                      },
                      {
                        "iconId": "hd",
                        "part": "right",
                        "defaultActive": 0,
                        "memo": "清晰度切换按钮",
                        "isrender": 0
                      },
                      {
                        "iconId": "webExpend",
                        "part": "right",
                        "defaultActive": 0,
                        "memo": "网页全屏按钮",
                        "isrender": 1
                      },
                      {
                        "iconId": "expend",
                        "part": "right",
                        "defaultActive": 0,
                        "memo": "全局全屏按钮",
                        "isrender": 0
                      }
                    ]
                  }
                };
                let video1 = response.data[0];
                if (video1) {
                  //视频1
                  this.video.ezvizPlay1 = new EZUIKit.EZUIKitPlayer({
                    id: `video1`,
                    url: video1.urlLiveHd,
                    accessToken: this.video.token,
                    audio:0,
                    themeData: themeData,
                  });
                }
                let video2 = response.data[1];
                if (video2) {
                  //视频1
                  this.video.ezvizPlay2 = new EZUIKit.EZUIKitPlayer({
                    id: `video2`,
                    url: video2.urlLiveHd,
                    accessToken: this.video.token,
                    audio:0,
                    themeData: themeData,
                  });
                }
                let video3 = response.data[2];
                if (video3) {
                  //视频1
                  this.video.ezvizPlay3 = new EZUIKit.EZUIKitPlayer({
                    id: `video3`,
                    url: video3.urlLiveHd,
                    accessToken: this.video.token,
                    audio:0,
                    themeData: themeData,
                  });
                }
                let video4 = response.data[3];
                if (video4) {
                  //视频1
                  this.video.ezvizPlay4 = new EZUIKit.EZUIKitPlayer({
                    id: `video4`,
                    url: video4.urlLiveHd,
                    accessToken: this.video.token,
                    audio:0,
                    themeData: themeData,
                  });
                }
              }
              // 监听窗口大小变化，调整播放器大小
              window.addEventListener('resize', () => {
                const gridContainer = document.querySelector('.grid-container');
                gridContainer.style.width = window.innerWidth + 'px';
                gridContainer.style.height = window.innerHeight + 'px';
                this.video.ezvizPlay1.resize();
                this.video.ezvizPlay2.resize();
                this.video.ezvizPlay3.resize();
                this.video.ezvizPlay4.resize();
              });
            });
          });
      },
      destroyVideo() {
        this.video.ezvizPlay1.stop();
        this.video.ezvizPlay1.destroy();
        this.video.ezvizPlay1 = null;
        this.video.ezvizPlay2.stop();
        this.video.ezvizPlay2.destroy();
        this.video.ezvizPlay2 = null;
        this.video.ezvizPlay3.stop();
        this.video.ezvizPlay3.destroy();
        this.video.ezvizPlay3 = null;
        this.video.ezvizPlay4.stop();
        this.video.ezvizPlay4.destroy();
        this.video.ezvizPlay4 = null;
      },
      getLabourStaff() {
        getLabourStaff(this.projectId).then(response => {
          this.projectData.staff.count = Array.from(response.staffCount);
          this.projectData.staff.enterCount = Array.from(response.enterCount);
          this.projectData.staff.exitCount = Array.from(response.exitCount);
          this.projectData.staff.postGroup = response.postGroup;
          this.projectData.staff.salaryDate = response.salaryDate;
          this.projectData.staff.totalList = response.totalList;
          this.projectData.staff.accumulateTotalList = response.accumulateTotalList;
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('labourStaff'));
          let option = {
            tooltip: {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
            },
            calculable: true,
            series: [{
              name: ' ',
              color: ['#1179FE', '#3FD4EC', '#67c961', '#cecd75', '#8613F6'],
              type: 'pie',
              radius: [0, 100],
              center: ['50%', '55%'],
              roseType: 'radius',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },

              lableLine: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: this.projectData.staff.postGroup
            }, ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize", function() {
            myChart.resize();
          });

          //页面交互、数据
          let myChart1 = echarts.init(document.getElementById('data7'));
          let option1 = {
            color: ['#0345A2'],
            title: {
              default: false
            },
            //整个图表位置
            grid: {
              left: '1%',
              right: '4%',
              bottom: '10%',
              top: '15%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis'
            },
            toolbox: {
              show: false
            },
            responsive: true,
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.projectData.staff.salaryDate,
              axisLabel: {
                interval: 1
              },
              axisLine: {
                lineStyle: {
                  color: '#0345A2', // 颜色
                  width: 1, // 粗细
                  type: 'solid'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#86BED3'
                }
              },
              //辅助线
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: '#143260',
                  type: 'dashed'
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#0345A2', // 颜色
                  width: 1, // 粗细
                  type: 'solid'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#86BED3'
                }
              },
              //辅助线
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: '#143260',
                  type: 'dashed'
                }
              }
            },
            series: [{
              name: '累计发放金额',
              type: 'line',
              smooth: false,
              data: this.projectData.staff.accumulateTotalList,
              symbol: 'none',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#023D7D' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0B1842' // 100% 处的颜色
                }])
              },
              markLine: {
                show: false
              }
            }]
          };
          myChart1.setOption(option1);
          // myChart.autoResize();
          // 窗口大小改变时自适应
          window.addEventListener('resize', function() {
            myChart1.resize();
          });

          let myChart2 = echarts.init(document.getElementById('data6'));
          let option2 = {
            tooltip: {},
            grid: {
              top: '14%',
              left: '1%',
              right: '1%',
              bottom: '2%',
              containLabel: true,
            },
            legend: {
              top: '-1%',
              itemGap: 50,
              data: ['每月完成金额'],
              textStyle: {
                color: '#1E94FE',
                borderColor: '#fff',
                fontSize: 14,
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: '#f9f9f9'
                },
              },
              axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15,
                },
                rotate: 60,
              },
              axisTick: {
                show: false,
              },
              data: this.projectData.staff.salaryDate,
              axisLabel: {
                interval: 1
              },
            }],
            yAxis: [{
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 7,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#0a3256'
                }
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: '#d1e6eb',

                },
              },
              axisTick: {
                show: false,
              },
            }],
            series: [ {
              name: '累计发放金额',
              type: 'bar',
              barWidth: 10,
              tooltip: {
                show: false
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                      offset: 0,
                      color: '#14c8d4'
                    },
                      {
                        offset: 1,
                        color: '#43eec6'
                      }
                    ]
                  ),
                }
              },
              data: this.projectData.staff.totalList
            }]
          };
          myChart2.setOption(option2);
          // 窗口大小改变时自适应
          window.addEventListener('resize', function() {
            myChart2.resize();
          });

        });
      },
    }
  }

</script>

<style lang="scss" scoped>
  @import "~@/assets/screen/screen4/scss/common.scss";
  @import "~@/assets/screen/screen4/scss/index.scss";
  @import "~@/assets/screen/screen4/scss/reset.scss";

  .map {
    width: 100%;
    height: 75vh;
  }

  ::v-deep .amap-logo {
    display: none;
    opacity: 0 !important;
  }

  ::v-deep .amap-copyright {
    opacity: 0;
  }
</style>
